<!-- 关注聊天 -->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>关注聊天</title>
    <link rel="stylesheet" href="/static/app/css/common.css">
    <link rel="stylesheet" href="/static/app/css/focusChat.css">
    <script src="/static/app/js/common/common.js"></script>
</head>
<body>
    <!-- 关注成功 -->
    <div class="success" style="display:none;">
        <p>关注成功</p>
    </div>
    <!-- 关注成功 -->
    <div class="container">
        <header class="header">
            <span class="pic">
                <img src="/static/app/images/icon_back2.png" alt="">
            </span>
            <span class="choice">王可可</span>
            <span class="txl" id="txl">
                <img src="/static/app/images/focus_bg.png" alt="" id="pics">
            </span><!-- 关注 -->
        </header>
        <section>
            <ul>
                <li>
                    <span style="width:1rem;height:1rem;display:inline-block;padding-left:0.3rem;">
                        <img src="/static/app/images/head03.png" alt="" style="width: 100%;height: 100%;">
                    </span>
                    <div class="chat">
                        <span>HI,您好，很高兴为您服务，请问有什么需要帮助的吗？</span>
                    </div>
                </li>
                <li class="li">
                    <div class="chats">
                        <span>HI,您好，很高兴为您服务，请问有什么需要帮助的吗？</span>
                    </div>
                    <span style="width:1rem;height:1rem;display:inline-block;padding-right:0.3rem;">
                        <img src="/static/app/images/head04.png" alt="" style="width: 100%;height: 100%;">
                    </span>
                </li>
            </ul>
        </section>
        <footer>
            <div class="footer">
                <span style="padding-left:0.2rem;">
                    <img src="/static/app/images/yuyin.png" alt="">
                </span>
                <input type="text">
                <span style="padding:0.2rem;">
                    <img src="/static/app/images/smile.png" alt="">
                </span>
                <span>
                    <img src="/static/app/images/add.png" alt="">
                </span>
            </div>
        </footer>
    </div>
</body>
<script src="/static/app/js/common/jquery-3.3.1.min.js"></script>
<script>
    $(function () {
        //先变黄 再显示关注成功
        function change_pic(){
            var txl = document.getElementById('txl');
            var pics = document.getElementById("pics");
            txl.onclick = function(){
                if(pics.getAttribute("src",2) == "/static/app/images/focus_bg.png"){
                    $(".success").fadeIn(1000)
                    setTimeout(function(){
                        $(".success").fadeOut(1000)
                    },1000)
                    pics.setAttribute("src","/static/app/images/focus.png");
                }else{
                    pics.setAttribute("src","/static/app/images/focus_bg.png");
                };
            }
        }
        change_pic();
        
        $('.pic').click(function(){
            window.location.href = '/static/app/html/messageList.html'
        })
    })
</script>
</html>